<template>
  <div>
    <FilterForm
      :visible="visible"
      :initialFilterData="initialFormData"
      @reset="handleResetForm"
      @submit="handleSubmit"
    >
      <template #row-1="{ formData }">
        <FilterFormItem>
          <a-form-item label="登记编号">
            <a-input v-model="formData.code" placeholder="请输入" />
          </a-form-item>
        </FilterFormItem>
        <FilterFormItem>
          <a-form-item label="申请人">
            <a-input v-model="formData.apply_by" placeholder="请输入" />
          </a-form-item>
        </FilterFormItem>
        <FilterFormItem>
          <a-form-item label="登记类型">
            <a-select v-model="formData.type" placeholder="请选择" allow-clear>
              <a-option v-for="(item, i) in flowStatus" :key="`flow_${i}`" :value="item.id">{{
                item.value
              }}</a-option>
            </a-select>
          </a-form-item>
        </FilterFormItem>
      </template>
      <template #row-2="{ formData }">
        <FilterFormItem>
          <a-form-item label="状态">
            <a-select v-model="formData.status" placeholder="请选择" allow-clear>
              <a-option v-for="(item, i) in handleStatus" :key="`handle_${i}`" :value="item.id">{{
                item.value
              }}</a-option>
            </a-select>
          </a-form-item>
        </FilterFormItem>
        <FilterFormItem>
          <a-form-item label="登记日期">
            <a-range-picker v-model="formData.create_time" style="width: 100%" />
          </a-form-item>
        </FilterFormItem>
      </template>
    </FilterForm>
  </div>
  <a-button @click="visible = !visible">显示/隐藏</a-button>
  <a-button @click="handleSubmit">handleSubmit</a-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import FilterForm from './FilterForm.vue';
import FilterFormItem from './FilterFormItem.vue';

const visible = ref(true);
const initialFormData = ref({
  code: '',
  apply_by: '',
  type: null,
  status: null,
  create_time: []
});
const flowStatus = ref([
  { id: 1, value: '类型1' },
  { id: 2, value: '类型2' }
]);
const handleStatus = ref([
  { id: 1, value: '状态1' },
  { id: 2, value: '状态2' }
]);

const handleSubmit = () => {
  // console.log('submit', data);
  console.log('handleSubmit');
};

const handleResetForm = () => {
  console.log('重置表单');
};
</script>
